<template>
	<view class="cloumCenter">
		<view class="w100 rowSpaceBetween mtb20 ps20">
			<text class="cardUnit">更新时间：2024-12-04 15:18:46</text>
			<view @click="changSort">
				<view class="sort rowCenter" v-if="!sort">
					<text>升序</text>
					<uv-icon name="arrow-upward" size="14"></uv-icon>
				</view>
				<view class="sort rowCenter" v-else>
					<text>降序</text>
					<uv-icon name="arrow-downward" size="14"></uv-icon>
				</view>
			</view>
		</view>

		<view class="cardContiner mtb30">
			<view class="borderbottom">
				<tabsComponent :tabsList="tabList" @handleTabClick="handleTabClick" />
			</view>
			<collapseTopVue :mode="'top'" :showIdent="false" :index='index' :items="item"
				v-for="(item,index) in prediceList" :key="item.id" />
		</view>
	</view>
</template>

<script setup>
	import tabsComponent from '@/components/tabsComponent/tabsComponent.vue';
	import collapseTopVue from './collapseTop.vue';
	import {
		transformDataStructure,
		dataList
	} from '@/untils/predictDataUtils.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 获取api方法
	import {
		predictListApi
	} from '@/api/agentApi/predict.js'
	import {
		reactive,
		ref
	} from 'vue';

	let tabList = [{
			name: '全部'
		},
		{
			name: '合伙人'
		},
		{
			name: '代理商'
		}
	];


	// 排序
	let sort = ref(false)

	// 佣金列表
	let prediceList = ref()
	// 获取佣金列表的参数
	let getPredictInfo = reactive({
		endTime: '',
		isAsc: '',
		nickName: '',
		pageNum: 1,
		pageSize: 10,
		parentUserId: '',
		startTime: '',
		userIds: []
	})

	// 获取佣金列表
	const predictList = async () => {
		let res = await predictListApi(getPredictInfo)
		prediceList.value = transformDataStructure(res.data.list, dataList)
	}

	// 排序
	const changSort = () => {
		sort.value = !sort.value
		prediceList.value = prediceList.value.reverse()
	}

	// 处理 Tabs 点击事件
	const handleTabClick = (e) => {
		console.log('Tab clicked: ', e);
	};



	// 页面加载
	onLoad(() => {
		predictList()
	})
</script>

<style lang="scss">
	.sort {
		padding: 6rpx 20rpx;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
		gap: 6rpx;
	}
</style>